﻿<template>
    <div id="app" style="background-color:#f5f5f3">
        <mt-header v-bind:title="title" style="background-color:#fda10e">
            <a slot="left" @click="back()">返回</a>
            <mt-button v-if="usertype==2" slot="right" @click="add()">添加</mt-button>
        </mt-header>

        <div class="mui-card" style="background-color:#f5f5f3" >

            <div v-if="list.length!=0"  class="timeline" >
                <div class="timeline-date" v-for="item in list">
                    <ul>
                        <h2 class="second" style="position: relative;">
                            <span>{{item.mydate}}</span>
                        </h2>
                        <li style="list-style:none;">

                            <dl class="right">
                            
                                    <div v-for="item2 in item.list" style="display: inline-flex;margin-top:5px;background-color:#ffffff;clear:left;"  @click="go(item2)">
                                        <img src="../assets/images/pic_food.png" v-if="item2.imgurl==''" width="100px;" height="100px;" style="float:left;" />
                                        <img :src="item2.imgurl" v-if="item2.imgurl!=''" width="100px;" height="100px;" style="float:left;" />
                                        <div style="float:left;margin-left:10px;padding-top:10px;">
                                            <p style="margin:0px;padding:0px;font-size:14px;height:20px;">{{item2.title}}</p>
                                            <p style="margin:0px;padding:0px;height:20px;margin-top:0px;">

                                                <rate disabled v-model="item2.star" />
                                            </p>
                                            <p style="margin:0px;padding:0px;font-size:12px;margin-top:10px;">{{item2.desc}}</p>
                                        </div>
                                    </div>
                                  
                                
                            </dl>

                        </li>
                       
                    </ul>
                </div>
               
            </div>
            <!--<Row>
                <Col span="24">

                <img v-if="item.imgurl==''" src="../assets/images/pic_food.png" width="100%" />
                <img v-else :src="item.imgurl" width="100%" />
                </Col>
            </Row>
            <Row style="padding-left:10px;">
                <Col span="16">
                <p>{{item.title}} 【{{item.type}}】 </p>
                <p>
                    <rate disabled v-model="item.star" />
                </p>
                </Col>
                <Col span="8" style="height:50px;line-height:50px;vertical-align:middle;text-align:center">
                <Button type="primary" shape="circle" @click="go(item)">查看</Button>
                </Col>
            </Row>
            <Row style="padding-left:10px;">
                <Col span="24">
                {{item.desc}}
                </Col>
            </Row>-->



        </div>
        <ul v-infinite-scroll="loadMore"
            infinite-scroll-disabled="busy"
            infinite-scroll-distance="10" class="clearfix">
            <div class="loading">{{loading}}</div>
        </ul>



    </div>


</template>

<script>

    import Bus from '../bus.js'

    export default {
        name: 'app',
        data() {
            return {
                title: "食谱",
                list: [],
                page: 1,
                busy: true,
                loading: "加载中...",
                usertype: ""
            }
        },
        components: {


        },
        mounted() {

            window.history.pushState('forward', null, '#');
            window.history.forward(1);

            window.onpopstate = () => {
                Bus.$emit('val', "show");
                this.$router.go(-1);

            }


        },
        methods:
        {
            loadMore() {

                this.$data.busy = true  //将无限滚动给禁用
                setTimeout(() => {  //发送请求有时间间隔第一个滚动时间结束后才发送第二个请求
                    this.$data.page = this.$data.page + 1;
                    this.load();
                }, 500);

            },
            add: function () {
                this.$router.push("foodadd");
            },
            go: function (e) {
                this.$router.push({ name: 'foodpage', params: { id: e.id } });
            },
            load: function () {
                var mid = window.localStorage.getItem("mid");
                var page = this.$data.page;

                var _this = this;
                this.$api.post('wx/Index/getfood', {
                    "mid": mid, "page": page
                }, response => {
                    if (response.status >= 200 && response.status < 300) {
                        console.log(response.data);
                        var data = response.data;
                        if (data.status == 200) {

                            if (data.data.length > 0) {
                                for (var i = 0; i < data.data.length; i++) {

                                    _this.$data.list.push(data.data[i]);
                                }


                                _this.$data.busy = false;
                            } else {

                                _this.$data.busy = true;
                                _this.$data.loading = "没有数据了";
                            }



                        }




                        //请求成功，response为成功信息参数
                    } else {
                        console.log(response.message);
                        //请求失败，response为失败信息
                    }
                });

            },
            back: function () {
                Bus.$emit('val', "show");
                this.$router.go(-1);

            }
        },
        props: {
            data: Array
        },
        created: function () {
            this.load();
            var usertype = window.localStorage.getItem("usertype");
            this.usertype = usertype;
            Bus.$emit('backshow', "1")
        }

    };

</script>

<style scoped>
    @import "../assets/css/mui.min.css";

    .loading {
        width: 100%;
        margin-bottom: 2px;
        text-align: center;
    }

    .timeline {
        background: url("../assets/images/line4.png") repeat-y 29px 0;
        overflow: hidden;
        position: relative;
        margin: 20px 10px;
        width: 520px;
        margin: 5px auto 0 auto;
    }

    .timeline-date {
        overflow: hidden;
        position: relative;
    }

        .timeline-date h2 {
            background: url("../assets/images/icon_canlendar.png") no-repeat 10px 0;
            height: 50px;
            margin-bottom: 20px;
        }

            .timeline-date h2 span {
                color: #999999;
                display: inline-block;
                font-size: 18px;
                margin: 13px 0px 0 56px;
            }

        .timeline-date ul li {
           
            zoom: 1;
            height: 70px;
        }

            .timeline-date ul li h3 {
                float: left;
                text-align: right;
                font-size: 14px;
                color: #878787;
                display: block;
            }

                .timeline-date ul li h3 span {
                    display: block;
                    color: #ADADAD;
                    font-size: 12px;
                    padding-left: 15px;
                }

            .timeline-date ul li dl {
                margin-top: -5px;
            }

                .timeline-date ul li dl.right {
                    background: url() no-repeat 0 0;
                    float: left;
                    margin-left: 40px;
                    margin-top: -5px;
                    display: block;
                    width: 310px;
                }

                .timeline-date ul li dl span {
                    display: block;
                    font-size: 16px;
                    padding: 0px 10px 0px 0px;
                    color: #fff;
                    line-height: 20px;
                }
</style>